<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-16 09:51:17
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-23 14:09:52
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <DtDialog v-model="visible" @close="handleClose" @confirm="handleConfirm" :isLoading="isLoading"
        :append-to-body="true" :isFooterSlot="isEdit" :size="'small'" :hiddenFullBtn="true">
        <template #header>
            <div class="dialogHeader">
                <span class="title">个人信息</span>
                <el-button type="primary" link @click="isEdit = true" v-if="!isEdit">编辑信息</el-button>
            </div>
        </template>
        <DtDetail v-model="formData" :columns="columns" :data="formData" :isEdit="isEdit" ref="formDataRef"
            @submit="handleSubmit" :column="1" :hasErrorTip="false" :rules="rules">
            <template #plus-field-avatar>
                <DtUploadCropper @successUpload='successUpload' :boxStyle="boxStyle" :uploadApi='updateAvatar'
                    ref="dtUploadAvatarRef" :fileLists='fileLists' :options="options" :isShowTip="true" :fileSize="2"
                    :fileSizeUnit="'MB'" :fileFormat="'jpeg/jpg/png'">
                    <template #tip>
                        仅允许上传格式jpeg/jpg/png、尺寸为200*200px的文件、最大可上传2MB的文件
                    </template>
                </DtUploadCropper>
            </template>
            <!-- 详情插槽 -->
            <template #plus-desc-avatar>
                <el-image :src="formData.avatarUrl"></el-image>
            </template>
        </DtDetail>
    </DtDialog>
</template>
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
import { userDetail, userEdit, updateAvatar } from '../../api/update-userinfo/index'
import { UpdateInfoParams } from '../../api/update-userinfo/types'
import { encryption } from '@/framework/utils/cryptojs/index'
import { useUserStore } from '@/framework/store/modules/user';
import { DtColumn } from 'hbisdt-design'
import { UploadUserFile } from 'element-plus';
const vm = getCurrentInstance()!
const { $modal, useDialog } = vm.appContext.config.globalProperties
const { visible, isLoading, closeDialog, openDialog, submitLoading, cancelLoading } = useDialog()
const dtUploadAvatarRef = ref()
const userStore = useUserStore();
const fileLists = ref<Partial<fileListType>[]>([])
const formDataRef = ref()
interface fileListType {
    fileId: string;
    url: string
}
const formData = ref<Partial<UpdateInfoParams>>({
    account: '',
    realName: '',
    phone: '',
    email: '',
    orgName: '',
    positionName: '',
    avatarUrl: '',
    avatar: ''
})
const isEdit = ref(false)
const rules = {
    avatar: [
        {
            required: true,
            validator: (rule: unknown, value: string, callback: (res?: Error | string) => void): void => {
                if (!formData.value.avatar) {
                    callback('请上传头像')
                } else {
                    callback()
                }
            },
            trigger: 'change'
        }
    ],
}
const columns: DtColumn[] = [
    {
        label: '头像',
        prop: 'avatar',
    },
    {
        label: '账号',
        prop: 'account',
        fieldProps: computed(() => ({ disabled: isEdit.value }))
    },
    {
        label: '姓名',
        prop: 'realName',
        defaultRuleType: 'name',
    },
    {
        label: '手机号',
        prop: 'phone',
        defaultRuleType: 'phone',
    },
    {
        label: '邮箱',
        prop: 'email',
        defaultRuleType: 'email',
    },
    {
        label: '组织',
        prop: 'orgName',
        fieldProps: computed(() => ({ disabled: isEdit.value }))
    },
    {
        label: '岗位',
        prop: 'positionName',
        fieldProps: computed(() => ({ disabled: isEdit.value }))
    }
]
const boxStyle = reactive({
    height: '100%',
    margin: 'auto',
    overflow: 'hidden'
})
const options = reactive({
    minCropBoxWidth: 200,
    minCropBoxHeight: 200

})
/**
 * @description:  初始化用户信息
 * @return {*}
 */
const infoUserData = async (): Promise<void> => {
    const res = await userDetail()
    formData.value = res.data
    fileLists.value = [
        {
            fileId: formData.value.account,
            url: formData.value.avatarUrl
        }
    ]
    formData.value.positionName = formData.value.positionName ? formData.value.positionName : '-'
    formData.value.orgName = formData.value.orgName ? formData.value.orgName : '-'
}
/**
 * @description:  关闭弹窗
 * @return {*}
 */
const handleClose = (): void => {
    isEdit.value = false
    closeDialog()
}
/**
 * @description:  点击“保存”按钮
 * @return {*}
 */
const handleConfirm = (): void => {
    if (!formDataRef.value) return
    formDataRef.value.handleSubmit()
}
/**
 * @description:  获取裁剪后的文件
 * @return {*}
 */
function successUpload(fileList: UploadUserFile[]): void {
    fileLists.value = fileList
    formData.value.avatar = fileLists.value.length > 0 ? fileLists.value[0].fileId : ''
}
/**
 * @description:  保存表单
 * @return {*}
 */
async function handleSubmit(): Promise<void> {
    submitLoading()
    try {
        const tempData = encryption<Partial<UpdateInfoParams>>({
            data: formData.value
        })
        await userEdit(tempData)
        userStore.getInfo()
        $modal.msgSuccess('修改成功')
        isEdit.value = false
        closeDialog()
        cancelLoading()
    } catch (error) {
        cancelLoading()
    }
}
defineExpose({
    openDialog,
    infoUserData
})
</script>
<style scoped lang="scss">
p {
    word-break: break-all;
    margin-block-start: 1em;
    margin-block-end: 1em;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.realName {
    font-size: 2em;
    margin: .67em 0;
}

.dialogHeader {
    display: flex;
    align-items: center;

    .title {
        font-family: PingFang SC;
        font-size: 18px;
        color: #131414;
        font-weight: 500;
        margin-right: 16px;
        height: 26px;
    }

    .el-button {
        font-family: PingFang SC;
        font-size: 12px;
        padding: 0;
        height: 20px;
    }
}

:deep(.el-descriptions__header) {
    margin-bottom: 0 !important;
}

:deep(.el-descriptions__label) {
    width: 56px;
}

.el-image {
    width: 32px;
    height: 32px;
}
</style>
